import React, { useEffect } from "react";
import { Input, Page } from "zmp-ui";
import {} from "../../state";
import request from "../../utils/request";
import util from "../../utils/util";
import "./Mine.scss";

const RechargePage = () => {
  useEffect(() => {
    util.setBarPageView("余额充值");
  }, []);
  return (
    <Page className="page mine">
      <div className="recharge-header">
        <img src="https://zhuanyun.sllowly.cn/assets/api/images//dzx_img127.png" />
        <div className="recharge-lable">我的余额 (￥)</div>
        <div className="recharge-amount">100</div>
      </div>
      <div className="recharge-content">
        <div className="recharge-title">充值金额</div>
        <div className="recharge-list">
          <div className="recharge-item active">充5000送1000</div>
          <div className="recharge-item">充5000送1000</div>
          <div className="recharge-item">充5000送1000</div>
        </div>
        <div className="recharge-title">自定义充值</div>
        <div className="recharge-input">
          <Input placeholder="请输入金额" />
        </div>
      </div>
      <div className="recharge-pay-method-content">
        <div className="recharge-title">充值金额</div>
        <div className="recharge-pay-list">
          <div className="recharge-pay-item">
            <div className="recharge-pay-label">
              <div className="recharge-pay-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images//dzx_img128.png" />
              </div>
              ZaloPay
            </div>
            <div className="checked"></div>
          </div>
          <div className="recharge-pay-item">
            <div className="recharge-pay-label">
              <div className="recharge-pay-icon">
                <img src="https://zhuanyun.sllowly.cn/assets/api/images//dzx_img130.png" />
              </div>
              余额支付
            </div>
            <div className="checked"></div>
          </div>
        </div>
      </div>
    </Page>
  );
};

export default RechargePage;
